<script setup lang="ts">
import { ref } from 'vue'
import fibFly from '@/assets/bit-screen/schedule-mge/fib-fly.png'
import mapCon from '@/assets/bit-screen/schedule-mge/map-con.png'
const checkList = [
  {
    img: mapCon,
    name: '禁飞'
  },
  {
    img: fibFly,
    name: '地图'
  }
]
const emits = defineEmits(['changePanel'])
const activeRadio = ref(-1) //两个都没选中
const handleClick = (index: number) => {
  console.log(index, 'index==')

  if (activeRadio.value == -1) {
    activeRadio.value = index
    emits('changePanel', index)
  } else {
    if (activeRadio.value == index) {
      activeRadio.value = -1
      emits('changePanel', activeRadio.value)
    } else {
      activeRadio.value = index
      emits('changePanel', activeRadio.value)
    }
  }
}
</script>
<template>
  <div class="control-side">
    <div
      v-for="(item, index) in checkList"
      :key="index"
      class="control-side-item"
      @click="handleClick(index)"
      :class="{ 'active-class': activeRadio == index }"
    >
      <img :src="item.img" alt="" />
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.active-class {
  border: 2px solid #078fd8;
}
.control-side {
  width: 46px;
  position: absolute;
  bottom: 10%;
  right: 25%;
}
.control-side-item {
  box-sizing: border-box;
  height: 60px;
  background: #131927;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 15px;
  font-size: 12px;
  color: #d3ecff;
  cursor: pointer;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
